<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
            label-width="68px">
            <el-form-item label="厂房ID" prop="roomCode">
                <el-input v-model="queryParams.roomCode" placeholder="请输入厂房ID" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
        
            <el-form-item label="设备ID" prop="facilityCode">
                <el-input v-model="queryParams.facilityCode" placeholder="请输入设备ID" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
        
            <el-form-item label="巡检时间" prop="inspectionTime">
                <el-date-picker clearable v-model="queryParams.inspectionTime" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择巡检时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 功能按钮区 -->
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['rooms:EquipmentInspection:add']">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate"
                    v-hasPermi="['rooms:EquipmentInspection:edit']">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                    @click="handleDelete" v-hasPermi="['rooms:EquipmentInspection:remove']">删除</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['rooms:EquipmentInspection:export']">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="equipmentInspectionList" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="厂房ID" align="center" prop="roomCode" />
            <el-table-column label="厂房名称" align="center" prop="roomName" /> <!-- 新增厂房名称列 -->
            <el-table-column label="设备ID" align="center" prop="facilityCode" />
            <el-table-column label="设备名称" align="center" prop="facilityName" /> <!-- 新增设备名称列 -->

            <el-table-column label="评估内容" align="center">
                <template slot-scope="scope">
                    <div v-html="scope.row.evaluationContent"></div>
                </template>
            </el-table-column>

            <el-table-column label="设备状态" align="center" prop="status"> <!-- 优化状态显示 -->
                <template slot-scope="scope">
                    <el-tag :type="scope.row.status === '正常' ? 'success' : 'warning'">
                        {{ scope.row.status }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="巡检时间" align="center" prop="inspectionTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.inspectionTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="巡检人员" align="center" prop="inspector" /> <!-- 新增巡检人员列 -->
            <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createdAt, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['rooms:EquipmentInspection:edit']">修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                        v-hasPermi="['rooms:EquipmentInspection:remove']">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />

        <!-- 添加/修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">

                <el-form-item label="厂房选择" prop="roomCode">
                    <el-select v-model="form.roomCode" placeholder="请选择厂房" @change="handleRoomSelect">
                        <!-- 新增：默认空选项，提示用户选择 -->
                        <el-option label="-- 请选择厂房 --" value=""></el-option>
                        <!-- 遍历厂房列表 -->
                        <el-option v-for="room in roomsList" :key="room.id" :label="room.roomName"
                            :value="room.roomCode"></el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="设备选择" prop="facilityCode">
                    <el-select v-model="form.facilityCode" placeholder="请先选择厂房" @change="handleFacilitySelect"
                        :disabled="!form.roomCode">
                        <el-option label="-- 请选择设备 --" value=""></el-option>
                        <!-- 修正循环，去掉多余的 -->
                        <el-option v-for="facility in filteredFacilitiesList" :key="facility.id"
                            :label="facility.facilityName" :value="facility.facilityCode">
                        </el-option>
                    </el-select>
                </el-form-item>



                <el-form-item label="评估内容" prop="evaluationContent">
                    <!-- 保留编辑器组件，若无需富文本可改为el-input -->
                    <editor v-model="form.evaluationContent" :min-height="192" />
                </el-form-item>
                <el-form-item label="设备状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择设备状态">
                        <el-option label="正常" value="正常"></el-option>
                        <el-option label="异常" value="异常"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="巡检时间" prop="inspectionTime">
                    <el-date-picker clearable v-model="form.inspectionTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择巡检时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="巡检人员" prop="inspector">
                    <el-input v-model="form.inspector" placeholder="请输入巡检人员姓名" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 导入接口（保持原有接口，确保与后端匹配）
import {
    getEquipmentInspection,
    delEquipmentInspection,
    addEquipmentInspection,
    updateEquipmentInspection,
    listRecord
} from "@/api/rooms/EquipmentInspection"

import {
    findAllRoomsinformation
} from "@/api/rooms/roomsinformation"


import {
    findAllFacilities,
    findFacilitiesByRoomCode
} from "@/api/rooms/Facilities"



export default {
    name: "EquipmentInspection",
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组（用于批量操作）
            ids: [],
            // 非单个禁用（修改按钮）
            single: true,
            // 非多个禁用（删除按钮）
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数（与JSON的total对应）
            total: 0,
            // 设备巡检记录表格数据（与JSON的rows对应）
            equipmentInspectionList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数（补充JSON中的字段）
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                id: null,
                roomCode: null,    // 厂房ID
                roomName: null,    // 新增：厂房名称
                facilityCode: null,// 设备ID
                facilityName: null,// 新增：设备名称
                inspectionTime: null,
                createdAt: null,
                inspector: null     // 新增：巡检人员（可选搜索项）
            },
            // 表单参数（完全匹配JSON字段）
            form: {
                id: null,
                type: null,         // JSON中的type字段（预留）
                children: null,     // JSON中的children字段（预留）
                roomCode: null,     // 厂房ID
                roomName: null,     // 厂房名称
                facilityCode: null, // 设备ID
                facilityName: null, // 设备名称
                evaluationContent: null, // 评估内容
                status: "正常",     // 设备状态（默认正常）
                inspectionTime: null, // 巡检时间
                inspector: null,    // 巡检人员
                createdAt: null,    // 创建时间（通常后端生成，前端可选）
                createBy: null,     // 创建人（后端生成）
                updateBy: null,     // 更新人（后端生成）
                updateTime: null,   // 更新时间（后端生成）
                remark: null        // 备注（预留）
            },
            // 表单校验规则（确保必填字段完整性）

            // 新增：存储所有厂房数据（用于下拉框选项）
            roomsList: [], // 格式：[{id: 1, roomCode: "F001", roomName: "一号厂房"}, ...]
            // 原有其他变量...（loading、ids、equipmentInspectionList等保持不变）
            form: {
                // 原有表单字段不变...
                roomCode: null,     // 厂房ID（选中下拉框后自动填充）
                roomName: null,     // 厂房名称（下拉框显示文本）
                // 其他字段...
            },

            // 新增：存储当前厂房的设备列表（用于设备下拉框）
            filteredFacilitiesList: []

        }
    },

    created() {
        // 页面初始化时加载数据
        this.getList(),
            this.loadRoomsList()// 新增：加载厂房列表（供下拉框使用）

    },

    methods: {

        loadRoomsList() {
            findAllRoomsinformation().then(response => {
                console.log('厂房列表接口返回：', response);
                if (response.code === 200 && Array.isArray(response.data)) {
                    this.roomsList = response.data;
                } else {
                    this.$message.error("加载厂房列表失败");
                }
            }).catch(error => {
                console.error('厂房列表加载错误：', error);
                this.$message.error("厂房数据加载异常");
            });
        },
        // 厂房下拉框选中事件：动态加载当前厂房的设备（核心方法）
        handleRoomSelect(roomCode) {
            // 1. 先匹配厂房名称，填充到表单（原有逻辑保留）
            const selectedRoom = this.roomsList.find(room => room.roomCode === roomCode);
            this.form.roomName = selectedRoom ? selectedRoom.roomName : "";

            // 2. 若未选择厂房（清空选择），则清空设备列表和表单中的设备值
            if (!roomCode) {
                this.filteredFacilitiesList = []; // 清空设备下拉框
                this.form.facilityCode = ""; // 重置设备编码
                this.form.facilityName = ""; // 重置设备名称
                return;
            }

            // 3. 调用接口：根据当前厂房编码，加载对应设备
            findFacilitiesByRoomCode(roomCode).then(response => {
                console.log('设备列表接口返回（厂房编码：' + roomCode + '）：', response);
                if (response.code === 200 && Array.isArray(response.data)) {
                    this.filteredFacilitiesList = response.data;
                } else {
                    this.$message.error("加载当前厂房设备失败");
                    this.filteredFacilitiesList = [];
                }
            }).catch(error => {
                console.error('设备列表加载错误：', error);
                this.$message.error("设备加载异常");
                this.filteredFacilitiesList = [];
            });
        },

        // 设备下拉框选中事件：填充设备名称（逻辑保留，数据源改为 filteredFacilitiesList）
        handleFacilitySelect(facilityCode) {
            // 从“当前厂房的设备列表”中匹配选中的设备
            const selectedFacility = this.filteredFacilitiesList.find(
                facility => facility.facilityCode === facilityCode
            );
            // 自动填充设备名称到表单
            this.form.facilityName = selectedFacility ? selectedFacility.facilityName : "";
        },


        /** 查询设备巡检记录列表 */
        getList() {
            this.loading = true
            // 调用接口（若listRecord与JSON匹配则保留，否则替换为listEquipmentInspection）
            listRecord(this.queryParams).then(response => {
                // 匹配JSON结构：response.rows为数据列表，response.total为总条数
                this.equipmentInspectionList = response.rows || []
                this.total = response.total || 0
                this.loading = false
            }).catch(error => {
                this.loading = false
                this.$message.error("数据加载失败：" + (error.msg || error.message))
            })
        },

        /** 取消操作 */
        cancel() {
            this.open = false
            this.reset()
        },

        /** 表单重置 */
        reset() {
            this.form = {
                id: null,
                type: null,
                children: null,
                roomCode: null,
                roomName: null,
                facilityCode: null,
                facilityName: null,
                evaluationContent: null,
                status: "正常",
                inspectionTime: null,
                inspector: null,
                createdAt: null,
                createBy: null,
                updateBy: null,
                updateTime: null,
                remark: null
            }
            this.resetForm("form")
        },

        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1 // 重置页码为1
            this.getList()
        },

        /** 重置搜索表单 */
        resetQuery() {
            this.resetForm("queryForm")
            this.handleQuery()
        },

        /** 多选框选中事件 */
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.id)
            this.single = selection.length !== 1 // 只有选中1条时启用修改
            this.multiple = !selection.length    // 至少选中1条时启用删除
        },

        /** 新增操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = "添加设备巡检记录"
        },

        handleUpdate(row) {
            this.reset(); // 重置表单（原有逻辑）
            const id = row.id || this.ids[0];

            getEquipmentInspection(id).then(response => {
                this.form = { ...response.data }; // 回显表单数据（含 roomCode、facilityCode 等）

                // 新增：根据回显的 roomCode，加载对应厂房的设备（用于设备下拉框回显）
                if (this.form.roomCode) {
                    // 调用接口加载当前厂房的设备
                    findFacilitiesByRoomCode(this.form.roomCode).then(res => {
                        if (res.code === 200 && Array.isArray(res.data)) {
                            this.filteredFacilitiesList = res.data; // 填充设备下拉框
                        }
                    });
                }

                this.open = true;
                this.title = "修改设备巡检记录";
            }).catch(error => {
                this.$message.error("数据获取失败：" + (error.msg || error.message));
            });
        },

        /** 提交表单（新增/修改） */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    // 区分新增和修改（根据form.id是否存在）
                    const submitApi = this.form.id ? updateEquipmentInspection : addEquipmentInspection
                    submitApi(this.form).then(response => {
                        this.$modal.msgSuccess(this.form.id ? "修改成功" : "新增成功")
                        this.open = false
                        this.getList() // 提交后刷新列表
                    }).catch(error => {
                        this.$message.error((this.form.id ? "修改" : "新增") + "失败：" + (error.msg || error.message))
                    })
                }
            })
        },

        /** 删除操作 */
        handleDelete(row) {
            const ids = row ? [row.id] : this.ids // 支持单条删除（行内按钮）和批量删除（选中删除）
            this.$modal.confirm(`是否确认删除选中的${ids.length}条设备巡检记录？`).then(() => {
                return delEquipmentInspection(ids)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess("删除成功")
            }).catch(() => { }) // 取消删除时不做处理
        },

        /** 导出操作 */
        handleExport() {
            this.download('rooms/equipmentInspection/export', {
                ...this.queryParams // 携带当前搜索参数导出
            }, `设备巡检记录_${new Date().getTime()}.xlsx`)
        }
    }
}
</script>

<style scoped>
/* 可选：添加自定义样式优化显示 */
.mini-btn-group {
    display: flex;
    gap: 8px;
}

.fixed-width {
    width: 120px !important;
}
</style>